<template>
    <div style="display: flex; flex-wrap: flex-start">
        <div class="demo-upload-list" v-for="(item, __index) in picture" :key="__index">
            <template >
                <!-- <Image :src="item" fit="cover" width="100%" height="100%" /> -->
                <img :src="item" />
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click="handleViewGoodsPicture(item)"></Icon>
                    <Icon type="ios-trash-outline" @click="handleRemoveGoodsPicture(item)"></Icon>
                </div>
            </template>
        </div>
        <Upload ref="uploadLicence" :show-upload-list="false" :on-success="handleSuccess"
            :format="['jpg', 'jpeg', 'png', 'gif']" :max-size="2048" :before-upload="OssPolicy"
            :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :on-error="uploadErr" multiple
            :action="action" :data="this.ossBody" type="drag">
            <!-- <Button type="info" :loading="uploadLoading">上传图片</Button> -->
            <div style="width: 148px; height: 148px; line-height: 148px">
                <Icon type="md-add" size="20"></Icon>
            </div>
        </Upload>
        <Modal title="View Image" v-model="goodsPictureVisible">
            <img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%" />
        </Modal>
    </div>
</template>
  
<script>
import { v4 as uuidv4 } from 'uuid';
import * as ApiOss from '@/api/myapi/Oss.js'
export default {
    name: "uploadPicMultiple",
    props:['pictureList'],
    data() {
        return {
            action: "https://xmut-mall.oss-cn-hangzhou.aliyuncs.com", // 上传地址
            accessToken: {}, // 验证token
            visible: false, // 预览图片
            loading: false, // 加载状态
            address: '', // 地址
            previewPicture: '', // 预览图片url
            ossBody: {
                policy: "",
                signature: "",
                ossaccessKeyId: "",
                key: "",
                dir: "",
                host: ""
            }, // oss签名上传所需的请求体`
            uploadLoading: false, // 上传loading
            picture: [],
            //展示商品图片
            goodsPictureVisible: false,
            // 商品图片预览
            previewGoodsPicture: "",
        };
    },
    methods: {
        // 上传之前
        beforeUpload() {
            this.uploadLoading = true;
            // if (this.picture.length >= 3) {
            //     this.$Message.warning('最多上传三张图片')
            //     return false;
            // }
        },
        // 上传成功回调
        handleSuccess(res, file) {
            this.$Message.success('上传成功')
            let fileName = this.ossBody.host +
                "/" +
                this.ossBody.key.replace("${filename}", file.name)
            this.uploadLoading = false;
            this.picture.push(fileName);
            this.$emit("imagesUpload",fileName);
        },
        // 上传失败
        uploadErr() {
            this.uploadLoading = false;
        },
        // 上传失败回调
        handleFormatError(file) {
            this.uploadLoading = false;
            this.$Notice.warning({
                title: 'The file format is incorrect',
                desc: '上传文件格式不正确'
            });
        },
        // 上传大小限制
        handleMaxSize(file) {
            this.uploadLoading = false;
            this.$Notice.warning({
                title: 'Exceeding file size limit',
                desc: '文件大小不能超过2M'
            });
        },
        // 图片查看
        handleView(item) {
            this.previewPicture = item;
            this.visible = true;
        },
        // 删除图片
        handleRemove(index) {
            this.picture.splice(index, 1);
        },
        // oss签名
        OssPolicy(file) {
            this.uploadLoading = true;
            // if (this.picture.length >= 3) {
            //     this.$Message.warning('最多上传三张图片')
            //     return false;
            // }
            return new Promise((resolve, reject) => {
                ApiOss.policy().then(res => {
                    if (res.data.code == 0) {
                        this.ossBody.policy = res.data.data.policy;
                        this.ossBody.signature = res.data.data.signature;
                        this.ossBody.ossaccessKeyId = res.data.data.accessid;
                        this.ossBody.dir = res.data.data.dir;
                        this.ossBody.key = res.data.data.dir + uuidv4() + file.name;
                        this.ossBody.host = res.data.data.host;
                        this.uploadLoading = false
                        resolve(true);
                    } else {
                        this.$Message.error('网络拥堵')
                        this.uploadLoading = false
                        return false;
                    }
                }).catch(err => {
                    this.uploadLoading = false
                    console.log('出错', err);
                    reject(false);
                });
            });
        },
        handleViewGoodsPicture(url) {
            this.previewGoodsPicture = url;
            this.goodsPictureVisible = true;
        },
        handleRemoveGoodsPicture(file) {
            this.picture = this.picture.filter(item => file != item)
        },
        reviewData(){
            this.picture.push(this.pictureList)
        }
    },
    watch:{
        pictureList:{
            handler: function (v) {
                if(v){
                    this.reviewData()
                }
            }
        }
    },
    created() {

    }
};
</script>
  
<style lang="scss" scoped>
.see-icon {
    font-size: 16px;
    cursor: pointer;
}

.upload {
    display: inline-block;
    margin-left: 10px;
}

.demo-upload-list {
    display: inline-block;
    width: 160px;
    height: 150px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    margin: 20 20px;
}
</style>
  
  